<!DOCTYPE html>
<html>
<head>
<!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="NavMenu">
<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
  </el-submenu>
  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
  </el-submenu>
  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>

<div id="Tables">
  <el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="用户管理" name="first">
  <h2>城市大冒险</h2>
  <p>今年圣诞节开场即可报名</p>
  <img src="http://tse2.mm.bing.net/th?id=OIP.RHpSTS9_o6ySq3vdgKb-jAFNC7&pid=15.1"></img>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</div>

</body>
<script>
new Vue({
	el:"#NavMenu",
	data:{
		activeIndex:'1',
		activeIndex2:'1'
 	 },
  	methods:{
  		handleSelect(key,keyPath){
    		console.log(key,keyPath);
    		}
  	}
})

new Vue({
        el:"#Tables",
        data:{
                activeName:'second'
        },
        methods:{
                handleClick(tab,event){
                        console.log(tab,event);
                }
        }
})


</script>
</html>
